<template>
	<view class="longbingbing-technician-list-item">
		<block v-if="type !== 2 && plugAuth.industrytype != 2">
			<view @tap.stop="goTechInfo" class="longbingbing-technician-item flex-center fill-base radius-16 rel"
				:style="{paddingTop: info.station_icon_name && plugAuth.industrytype == 3 ? '60rpx' : '30rpx' }"
				v-if="coach_list_format===1">
				<view class="abs label-item-career f-icontext text-center"
					v-if="info.station_icon_name && plugAuth.industrytype == 3">
					{{info.station_icon_name}}
					<view class="label-item-bg abs"></view>
				</view>
				<image mode="aspectFill" class="king-img abs"
					:style="{top: info.station_icon_name && plugAuth.industrytype == 3 ? '160rpx' : '130rpx'}"
					:src="`https://www.peikangbao.cn/admin/anmo/mine/king.gif`" v-if="info.coach_type_status==1">
				</image>
				<view class="flex-center flex-column">
					<view @tap.stop="toPreviewImage('all_img')" class="item-img rel">
						<!-- #ifdef H5 -->
						<view class="item-img radius">
							<view class="h5-image item-img radius"
								:style="{ backgroundImage : `url('${info.work_img}')`}">
							</view>
						</view>
						<view @tap.stop="toPreviewImage('all_img')" class="h5-image abs"
							:class="[{'top-img':info.coach_type_status == 1 || (info.coach_type_status == 4 && info.coach_icon)},{'hot-img': info.coach_type_status == 2},{'new-img': info.coach_type_status == 3},{'recommend-img': info.coach_type_status == 4 && !info.coach_icon}]"
							:style="{ backgroundImage : info.coach_type_status == 4 && info.coach_icon ? `url('${info.coach_icon}')`: info.coach_type_status === 1 || info.coach_type_status === 3 || (info.coach_type_status == 4 && !info.coach_icon)? 
							`url('https://www.peikangbao.cn/admin/anmo/mine/${imgType[info.coach_type_status]}.png')` : 
							`url('https://www.peikangbao.cn/admin/anmo/mine/${imgType[info.coach_type_status]}.gif')`}"
							v-if="info.coach_type_status">
						</view>
						<!-- #endif -->
						<!-- #ifndef H5 -->
						<image mode="aspectFill" class="item-img radius" :src="info.work_img">
						</image>
						<image @tap.stop="toPreviewImage('all_img')" mode="aspectFill" class="abs"
							:class="[{'top-img':info.coach_type_status == 1 || (info.coach_type_status == 4 && info.coach_icon)},{'hot-img': info.coach_type_status == 2},{'new-img': info.coach_type_status == 3},{'recommend-img': info.coach_type_status == 4 && !info.coach_icon}]"
							:src="info.coach_type_status == 4 && info.coach_icon ? `${info.coach_icon}`: info.coach_type_status === 1 || info.coach_type_status === 3 || (info.coach_type_status == 4 && !info.coach_icon) ? 
							`https://www.peikangbao.cn/admin/anmo/mine/${imgType[info.coach_type_status]}.png` : 
							`https://www.peikangbao.cn/admin/anmo/mine/${imgType[info.coach_type_status]}.gif`"
							v-if="info.coach_type_status">
						</image>
						<!-- #endif -->
					</view>
					<view class="item-tag flex-center f-icontext c-base radius-20"
						:style="{background: btn_config[info.text_type*1-1].btn_color,color:btn_config[info.text_type*1-1].font_color}">
						{{btn_config[info.text_type*1-1].text}}
					</view>
				</view>
				<view class="flex-1 ml-md" style="height:192rpx" :style="{maxWidth:'510rpx'}">
					<view class="flex-between mt-sm">
						<view class="flex-y-center f-title c-title">
							<view class="text-bold max-150 ellipsis">{{info.coach_name}}</view>
							<!-- <view @tap.stop="toPreviewImage('self_img')"
								class="more-img flex-center ml-sm f-icontext c-base" :style="{background:primaryColor}">
								更多照片
							</view> -->
							<view class="flex-y-center f-icontext ml-md"><i
									class="iconfont iconyduixingxingshixin icon-font-color"></i>
								<view class="star-text">{{info.star}}</view>
							</view>
						</view>
						<view>
							<view class="can-service-btn flex-center f-icontext rel" :style="{color:primaryColor}"
								v-if="info.near_time">
								<view class="bg abs" :style="{background:primaryColor}"></view>
								最早可约：{{info.near_time}}
							</view>
						</view>
					</view>
					<view class="flex-between mt-md">
						<view class="flex-center">
							<view class="flex-y-center f-icontext" v-if="info.show_salenum" style="margin-right: 2px;">
								<view class="order-num flex-y-center">
									已服务<view class="f-desc text-bold">
										{{info.order_num > 9999 ? '9999+' : info.order_num}}
									</view>单</view>
							</view>
							<view class="flex-center rel label-item ml-sm" v-if="info.personality_icon">
								<text class="f-icontext ellipsis max-170"
									style="color: #FF3300;z-index: 1;">{{info.personality_icon}}</text>
								<view class="label-item-bg abs"></view>
							</view>
						</view>
						<view class="free-fare-btn flex-center f-icontext" v-if="info.free_fare">
							免出行费
						</view>
						<view class="flex-center" v-else>
							<i class="iconfont iconjuli" :style="{color:primaryColor}"></i>
							<view class="f-desc c-title">{{info.distance}}</view>
						</view>
					</view>
					<view class="flex-between b-1px-t pt-md mt-md">
						<view class="flex-y-center f-desc c-caption">
							<view @tap.stop="toEmit('comment')" class="flex-y-center" v-if="app_model_type != 1"><i
									class="iconfont iconpinglun mr-sm"></i>{{info.comment_num > 99 ? '99+':info.comment_num}}
							</view>
							<view @tap.stop="toEmit('collect')" class="flex-y-center ml-md"><i class="iconfont mr-sm"
									:class="[{'iconshoucang1':!info.is_collect},{'iconshoucang2':info.is_collect}]"
									:style="{color:info.is_collect ? primaryColor :''}"></i>{{info.collect_num > 99 ? '99+':info.collect_num}}
							</view>
							<view @tap.stop="goInfo" class="flex-y-center ml-md">
								<block
									v-if="from!='collect' && merchant_switch_show && info.admin_id && info.merchant_name">
									<i class="iconfont iconshangjia_1 c-caption mr-sm"></i>
									<view class="max-100 ellipsis">{{info.merchant_name}}</view>
								</block>
								<block v-else-if="from!='collect' && plugAuth.store && info.store && info.store.id">
									<i class="iconfont icondianpu c-caption mr-sm"></i>
									<view class="max-100 ellipsis">{{info.store.title}}</view>
								</block>
								<block v-else>
									<i class="iconfont iconshangjia_1 c-caption mr-sm"></i>
									商家
								</block>
							</view>
						</view>
						<auth @tap.stop.prevent :needAuth="!userInfo || (userInfo && (!userInfo.phone || !userInfo.nickName))"
							:type="!userInfo.phone ? 'phone' : 'userInfo'" @go="toEmit('order')" style="width:130rpx;">
							<view class="item-btn flex-center f-desc c-base"
								:style="{background:info.is_work ? primaryColor:'#888'}">
								立即预约
							</view>
						</auth>
					</view>
				</view>
			</view>

			<view @tap.stop="goTechInfo" class="list-2-item fill-base radius-16" v-if="coach_list_format===2">
				<view class="item-img rel">
					<!-- #ifdef H5 -->
					<view class="item-img radius">
						<view class="h5-image item-img radius" :style="{ backgroundImage : `url('${info.work_img}')`}">
						</view>
					</view>
					<!-- #endif -->
					<!-- #ifndef H5 -->
					<image mode="aspectFill" class="item-img radius" :src="info.work_img">
					</image>
					<!-- #endif -->
					<view class="abs item-status flex-center f-caption c-base"
						:style="{background:btn_config[info.text_type*1-1].btn_color,color:btn_config[info.text_type*1-1].font_color}">
						<view class="text text-center">{{btn_config[info.text_type*1-1].text}}</view>
					</view>
					<view class="abs item-time-order flex-between f-icontext c-base">
						<view class="text">
							<block v-if="info.near_time">最早可约 {{info.near_time}}</block>
						</view>
						<view>
							<view class="text" v-if="info.show_salenum">已服务
								{{info.order_num > 9999 ? '9999+' : info.order_num}}单
							</view>
						</view>
					</view>
				</view>
				<view style="padding: 18rpx 16rpx;">
					<view class="flex-y-center">
						<view class="f-desc c-title text-bold ellipsis">{{info.coach_name}}</view>
						<view class="flex-1 flex-y-center ml-sm"><i class="iconfont iconyduixingxingshixin"></i>
							<view class="star-text f-icontext">{{info.star}}</view>
						</view>
					</view>
					<view class="flex-between mt-sm">
						<view @tap.stop="toPreviewImage('self_img')" class="item-btn flex-center f-desc"
							:style="{color:primaryColor,borderColor:primaryColor}">{{$t('action.lifeText')}}
						</view>
						<auth @tap.stop.prevent :needAuth="!userInfo || (userInfo && (!userInfo.phone || !userInfo.nickName))"
							:type="!userInfo.phone ? 'phone' : 'userInfo'" @go="toEmit('order')" style="width:148rpx;">
							<view class="item-btn flex-center f-desc c-base"
								:style="{background:info.is_work ? primaryColor:'#888',borderColor:info.is_work ? primaryColor:'#888'}">
								去预约
							</view>
						</auth>
					</view>
					<view class="flex-x-between f-icontext c-caption" style="margin-top: 15rpx;">
						<view @tap.stop="toEmit('comment')" class="flex-y-center" v-if="app_model_type != 1"><i
								class="iconfont iconpinglun"></i>{{info.comment_num > 99 ? '99+':info.comment_num}}
						</view>
						<view @tap.stop="toEmit('collect')" class="flex-y-center"><i class="iconfont"
								:class="[{'iconshoucang1':!info.is_collect},{'iconshoucang2':info.is_collect}]"
								:style="{color:info.is_collect ? primaryColor :''}"></i>{{info.collect_num > 99 ? '99+':info.collect_num}}
						</view>
						<view class="flex-y-center">
							<i class="iconfont iconjuli1"></i>
							<view>{{info.distance}}</view>
						</view>
					</view>
				</view>
			</view>

			<view @tap.stop="goTechInfo" class="list-3-item fill-base rel" v-if="coach_list_format === 3">
				<view class="flex-center" style="overflow: hidden"
					:style="{padding: `${info.station_icon_name && plugAuth.industrytype == 3 ? '60rpx' : '30rpx'} 24rpx 24rpx 24rpx`}">
					<view class="abs label-item-career f-icontext text-center"
						v-if="info.station_icon_name && plugAuth.industrytype == 3">
						{{info.station_icon_name}}
						<view class="label-item-bg abs"></view>
					</view>
					<view @tap.stop="toPreviewImage('all_img')" class="item-img rel">
						<!-- #ifdef H5 -->
						<view class="item-img radius">
							<view class="h5-image item-img radius"
								:style="{ backgroundImage : `url('${info.work_img}')`}">
							</view>
						</view>
						<!-- #endif -->
						<!-- #ifndef H5 -->
						<image mode="aspectFill" class="item-img radius" :src="info.work_img">
						</image>
						<!-- #endif -->
						<image @tap.stop="toPreviewImage('all_img')" class="abs"
							:class="[{'top-img':info.coach_type_status !== 4 || info.coach_icon},{'recommend-img':info.coach_type_status === 4&& !info.coach_icon}]"
							:src="info.coach_type_status === 4 && info.coach_icon ? info.coach_icon  : `https://www.peikangbao.cn/admin/anmo/mine/${ imgType3[info.coach_type_status] }${info.coach_type_status === 4 ? `` : `_3`}.gif`"
							v-if="info.coach_type_status"></image>
					</view>
					<view class="flex-1" style="margin-left: 24rpx">
						<view class="flex-between">
							<view class="flex-y-center f-title">
								<view class="text-bold max-150 ellipsis" style="color: #222724"> {{ info.coach_name }}
								</view>
								<view class="item-tag flex-center f-icontext c-base"
									:style="{ background: btn_config[info.text_type * 1 - 1].btn_color, color: btn_config[info.text_type * 1 - 1].font_color }"
									v-if="info.text_type * 1">
									<view class="scale-9"> {{ btn_config[info.text_type * 1 - 1].text }} </view>
								</view>
							</view>
							<view>
								<view class="can-service-btn flex-center f-icontext rel" :style="{color:primaryColor}"
									v-if="info.near_time">
									<view class="bg abs" :style="{background:primaryColor}"></view>
									最早可约 {{info.near_time}}
								</view>
							</view>
						</view>
						<view class="mt-md f-icontext"
							:class="[{'flex-between': info.show_salenum && info.personality_icon}, {'flex-y-center': !info.show_salenum || !info.personality_icon }]">
							<view class="flex-y-center">
								<i class="iconfont iconyduixingxingshixin icon-font-color"></i>
								<view class="star-text f-paragraph icon-font-color">
									{{ info.star }}
								</view>
							</view>
							<block v-if="info.show_salenum">
								<view :class="[{'flex-1 flex-center': info.personality_icon}]"
									:style="{margin: !info.personality_icon ? '0 40rpx' : ''}">
									<view class="line" style="margin: 0;"></view>
								</view>
								<view class="flex-y-center text-center">
									<view class="order-num flex-y-center f-caption">
										已服务
										<view class="f-desc text-bold" style="color: #222724">
											{{ info.order_num > 9999 ? '9999+' : info.order_num }}
										</view>
										单
									</view>
								</view>
							</block>
							<view :class="[{'flex-1 flex-center': info.show_salenum}]"
								:style="{margin: !info.show_salenum ? '0 40rpx' : ''}" v-if="info.personality_icon">
								<!--station_icon_name-->
								<view class="line" style="margin: 0;"></view>
							</view>
							<view class="flex-y-center">
								<view class="flex-center rel label-item" v-if="info.personality_icon">
									<text class="f-icontext"
										style="color: #FF3300;z-index: 1;">{{info.personality_icon}}</text>
									<view class="label-item-bg abs"></view>
								</view>
							</view>
						</view>
						<view class="flex-between" style="margin-top: 16rpx;">
							<view class="flex-y-center f-desc" style="color: #7a7d7c">
								<view @tap.stop="toEmit('collect')" class="flex-y-center mr-md pr-md">
									<i class="iconfont mr-sm"
										:class="[ { 'iconaixin-weidianliang': !info.is_collect }, { 'iconaixin-dianliang': info.is_collect } ]"
										:style="{ color: info.is_collect ? primaryColor : '' }"></i>
									<view class="text-bold">{{ info.collect_num }}</view>
								</view>
								<view @tap.stop="toEmit('comment')" class="flex-y-center" v-if="app_model_type != 1">
									<i class="iconfont iconpinglun4 mr-sm"></i>
									<view class="text-bold">{{ info.comment_num }}</view>
								</view>
							</view>
							<auth @tap.stop.prevent :needAuth="!userInfo || (userInfo && (!userInfo.phone || !userInfo.nickName))"
								:type="!userInfo.phone ? 'phone' : 'userInfo'" @go="toEmit('order')"
								style="width:144rpx;">
								<view class="item-btn flex-center f-desc c-base"
									:style="{background:info.is_work ? primaryColor:'#888'}">
									预约
								</view>
							</auth>
						</view>
					</view>
				</view>
				<view class="flex-between f-desc pt-md b-1px-t" style="color: #4e5250; margin:0 24rpx">
					<view @tap.stop="goInfo" class="flex-y-center">
						<i class="iconfont icondianpu2"></i>
						<view class="flex-y-baseline">
							<view class="max-400 ellipsis" style="margin: 0 6rpx 0 10rpx">
								<block
									v-if="from!='collect' && merchant_switch_show && info.admin_id && info.merchant_name">
									{{info.merchant_name}}
								</block>
								<block v-else-if="from!='collect' && plugAuth.store && info.store && info.store.id">
									{{info.store.title}}
								</block>
								<block v-else>
									商家
								</block>
							</view>
							<i class="iconfont icon-right text-bold" style="font-size: 22rpx"></i>
						</view>
					</view>
					<view class="free-fare-btn flex-center f-icontext" v-if="info.free_fare">
						免出行费
					</view>
					<view class="flex-center" v-else>
						<i class="iconfont icon-dingwei-fill" :style="{ color: primaryColor }"></i>
						<view class="text-bold">
							{{ info.distance }}
						</view>
					</view>
				</view>
			</view>

			<view @tap.stop="goTechInfo" class="list-5-item fill-base rel radius-16 flex"
				v-if="coach_list_format === 4">
				<view class="">
					<view class="item-img-box rel">
						<image mode="aspectFill" :src="info.work_img" class="item-img radius-24"></image>
						<block
							v-if="(!info.coach_icon && info.coach_type_status == 4) || [1,2,3].includes(info.coach_type_status)">
							<image mode="aspectFill"
								:src="`https://www.peikangbao.cn/admin/anmo/diy/${imgType4[info.coach_type_status].src}.png`"
								class="abs" :class="imgType4[info.coach_type_status].src" style="z-index:1"
								v-if="[1,2,3].includes(info.coach_type_status)"></image>
							<image mode="aspectFill" :src="`https://www.peikangbao.cn/admin/anmo/mine/recommend.gif`"
								class="abs" :class="imgType4[info.coach_type_status].src" style="z-index:1"
								v-if="info.coach_type_status == 4"></image>
							<image mode="aspectFill"
								:src="`https://www.peikangbao.cn/admin/anmo/diy/${imgType4[info.coach_type_status].src_b}.png`"
								class="abs" :class="imgType4[info.coach_type_status].src_b" style="z-index:1"
								v-if="[1,2].includes(info.coach_type_status)"></image>
						</block>
						<block v-else>
							<image mode="aspectFill" class="abs diy-4-crown-2" style="z-index:1" :src="info.coach_icon">
							</image>
						</block>
					</view>
				</view>
				<view class="flex-1"
					:class="[{'pl-md': info.coach_type_status != 1},{'pl-lg': info.coach_type_status == 1}]"
					:style="{paddingTop: '45rpx'}">
					<view class="flex-between">
						<view class="flex-y-center">
							<text class="f-title text-bold pr-md ellipsis max-200"
								style="line-height: normal;">{{info.coach_name}}</text>
							<view class="flex-center rel label-item"
								v-if="info.station_icon_name && plugAuth.industrytype == 3">
								<text class="f-icontext"
									style="color: #FF3300;z-index: 9;">{{info.station_icon_name}}</text>
								<view class="label-item-bg abs"></view>
							</view>
						</view>
						<view class="free-fare-btn flex-center f-icontext" v-if="info.free_fare">
							免出行费
						</view>
						<view class="ml-sm text-right f-caption c-desc" v-else>{{info.distance}}</view>
					</view>
					<view class="pt-md flex-y-center f-icontext" style="line-height: 1;">
						<view class="flex-y-center">
							<i class="iconfont iconyduixingxingshixin icon-font-color"></i>
							<view class="star-text f-paragraph icon-font-color">
								{{ info.star }}
							</view>
						</view>
						<view class="flex-y-center c-caption" v-if="app_model_type != 1">
							<view class="line"></view>
							<view class="flex-y-center"><i
									class="iconfont iconpinglun mr-sm"></i>{{info.comment_num > 99 ? '99+':info.comment_num}}
							</view>
						</view>
						<view class="flex-y-center c-caption">
							<view class="line"></view>
							<view class="flex-y-center"><i class="iconfont mr-sm"
									:class="[{'iconshoucang1':!info.is_collect},{'iconshoucang2':info.is_collect}]"
									:style="{color:info.is_collect ? primaryColor :''}"></i>{{info.collect_num > 99 ? '99+':info.collect_num}}
							</view>
						</view>
					</view>
					<view class="pt-md flex-between pb-md">
						<view class="flex-center">
							<view class="flex-y-center" @tap.stop="goInfo">
								<block
									v-if="from!='collect' && merchant_switch_show && info.admin_id && info.merchant_name">
									<i class="iconfont iconshangjia_1 c-caption"
										style="font-size: 13px;margin-right: 3px;"></i>
									<text class="c-paragraph f-desc ellipsis"
										:style="{maxWidth: (info.personality_icon ? 55 : 150) + `px` }">
										{{info.merchant_name}}
									</text>
								</block>
								<block v-else-if="from!='collect' && plugAuth.store && info.store && info.store.id">
									<i class="iconfont icondianpu c-caption"
										style="font-size: 13px;margin-right: 3px;"></i>
									<text class="c-paragraph f-desc ellipsis"
										:style="{maxWidth: (info.personality_icon ? 55 : 150) + `px` }">
										{{info.store.title}}
									</text>
								</block>
								<block v-else>
									<i class="iconfont iconshangjia_1 c-caption"
										style="font-size: 13px;margin-right: 3px;"></i>
									<text class="c-paragraph f-desc max-100 ellipsis">
										商家
									</text>
								</block>
							</view>
							<view class="flex-center rel label-item ml-sm" v-if="info.personality_icon">
								<text class="f-icontext"
									style="color: #FF3300;z-index: 1;">{{info.personality_icon}}</text>
								<view class="label-item-bg abs"></view>
							</view>
						</view>
						<view class="flex-center" v-if="info.show_salenum">
							<text class="f-desc c-paragraph" style="margin-right: 2px;">单量</text>
							<text class="f-desc text-bold"
								:style="{color: primaryColor}">{{ info.order_num > 9999 ? '9999+' : info.order_num }}</text>
						</view>
					</view>
					<view class="b-1px-t pt-md flex-between">
						<view class="can-service-btn flex-center f-icontext rel" v-if="info.near_time">
							<view class="bg abs" :style="{background:primaryColor}"></view>
							<view class="f-icontext c-base text rel text-center" :style="{background:primaryColor}">最早可约
							</view>
							<view class="f-icontext near-time" :style="{color:primaryColor}">{{info.near_time}}</view>
						</view>
						<view v-else></view>
						<auth @tap.stop.prevent :needAuth="!userInfo || (userInfo && (!userInfo.phone || !userInfo.nickName))"
							:type="!userInfo.phone ? 'phone' : 'userInfo'" @go="toEmit('order')" style="width:130rpx;">
							<view class="item-btn flex-center f-desc c-base radius-10"
								:style="{ background: btn_config[info.text_type * 1 - 1].btn_color , color: btn_config[info.text_type * 1 - 1].font_color}">
								{{btn_config[info.text_type * 1 - 1].text}}
							</view>
						</auth>
					</view>
				</view>
			</view>
		</block>

		<!--陪玩样式-->
		<view @tap.stop="goTechInfo" class="list-4-item fill-base radius-16"
			v-if="play_list_format === 1 && (plugAuth.industrytype == 2 || type == 2 )">
			<view class="item-img rel">
				<!-- #ifdef H5 -->
				<view class="item-img radius">
					<view class="h5-image item-img radius" :style="{ backgroundImage : `url('${info.work_img}')`}">
					</view>
				</view>
				<!-- #endif -->
				<!-- #ifndef H5 -->
				<image mode="aspectFill" class="item-img radius" :src="info.work_img">
				</image>
				<!-- #endif -->
				<!-- <view class="abs item-status flex-center f-caption c-base"
						:style="{background:btn_config[info.text_type*1-1].btn_color,color:btn_config[info.text_type*1-1].font_color}">
						<view class="text text-center">{{btn_config[info.text_type*1-1].text}}</view>
					</view> -->
				<view class="abs item-label flex-y-center">
					<view
						:style="{background:btn_config[info.text_type*1-1].btn_color,color:btn_config[info.text_type*1-1].font_color}"
						class="f-icontext flex-center c-base item-status">{{btn_config[info.text_type*1-1].text}}</view>
					<!-- 个性标签 -->
					<view class="flex-center item-status ml-sm rel fill-base" v-if="info.personality_icon">
						<text class="f-icontext ellipsis max-180"
							:style="{color: primaryColor,zIndex: 1}">{{info.personality_icon}}</text>
						<view class="item-status-bg abs" :style="{background: primaryColor}"></view>
					</view>
				</view>

				<view class="item-info abs pl-md pr-md ">
					<view class="item-info-box abs">
						<view class="item-info-name flex-y-center">
							<text class="f-paragraph c-base pr-sm ellipsis max-200">{{info.coach_name}}</text>
							<view class="flex-center item-info-age">
								<i class="iconfont"
									:class="[{'iconnv-hongse': info.sex == 1},{'iconnan-lanse': info.sex == 0}]"
									:style="{color: info.sex == 1 ? '#F72370' : '#319AFF',fontSize: '10px'}"></i>
								<!--iconnan-lanse-->
								<text class="f-little"
									:style="{color: info.sex == 1 ? '#F72370' : '#319AFF',paddingLeft: '2px'}">{{info.year || 0}}</text>
							</view>
						</view>
						<view class="pt-sm">
							<block v-for="(item,index) in userType" :key="index">
								<view class="item-info-label text-center f-caption mr-sm"
									:style="{color: item.color,border: `1px solid ${item.color}`}"
									:class="[`item-info-${item.name}`]" v-if="info[item.name]">
									<text
										style="font-size: 0.8em;line-height: normal;">{{(info[item.name] || '') + item.unit}}</text>
								</view>
							</block>
						</view>
						<view class="flex-between" style="padding-top: 16rpx;">
							<view class="flex-y-center">
								<i class="icondizhi2 iconfont" style="color: #fff;font-size: 12px;"></i>
								<text class="f-ms-little c-base"
									style="padding-left: 6rpx;line-height: 12px;">{{info.distance}}</text>
							</view>
							<view class="f-caption c-base flex-center item-info-btn"
								:style="{background: primaryColor}">邀约</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- #ifdef APP-PLUS -->
		<longbingbing-preview-image ref="preview_image_item"></longbingbing-preview-image>
		<!-- #endif -->
	</view>
</template>

<script>
	import {
		mapState,
		mapActions,
		mapMutations
	} from "vuex"
	export default {
		components: {},
		props: {
			from: {
				type: String,
				default () {
					return 'list'
				}
			},
			info: {
				type: Object,
				default () {
					return {}
				}
			},
			type: {
				type: Number,
				default () {
					return 0
				}
			}
		},
		data() {
			return {
				imgType: {
					1: 'top1',
					2: 'hot',
					3: 'new',
					4: 'tuijian'
				},
				imgType3: {
					1: 'top',
					2: 'hot',
					3: 'new',
					4: 'recommend'
				},
				imgType4: {
					1: {
						src: 'diy-4-crown-1',
						src_b: 'diy-4-medal'
					},
					2: {
						src: 'diy-4-super',
						src_b: 'diy-4-crown'
					},
					3: {
						src: 'diy-4-new'
					},
					4: {
						src: 'diy-4-recommend'
					}
				},
				userType: [{
						name: 'height',
						color: '#DCBBFF',
						unit: 'cm'
					},
					{
						name: 'weight',
						color: '#FFB395',
						unit: 'kg'
					},
					{
						name: 'constellation',
						color: '#9DFCDC',
						unit: ''
					}
				],
			}
		},
		computed: mapState({
			plugAuth: state => state.config.configInfo.plugAuth,
			coach_list_format: state => state.config.configInfo.coach_list_format,
			play_list_format: state => state.config.configInfo.play_list_format,
			merchant_switch_show: state => state.config.configInfo.merchant_switch_show,
			btn_config: state => state.config.configInfo.btn_config,
		}),
		methods: {
			...mapActions(['getUserInfo']),
			...mapMutations(['updateUserItem']),
			async toPreviewImage(key) {
				let check = await this.$util.toCheck()
				if (!check) return
				let {
					work_img,
					self_img
				} = this.info
				let urls = this.$util.deepCopy(self_img)
				if (key == 'all_img') {
					urls.unshift(work_img)
				}
				if (key === 'work_img') {
					urls = [work_img]
				}
				// #ifdef APP-PLUS 
				if (plus.os.name == 'Android' && plus.navigator.checkPermission(
						'android.permission.WRITE_EXTERNAL_STORAGE') === 'undetermined') {
					this.$refs.preview_image_item
						.previewImage({
							current: urls[0],
							urls
						})
				} else {
					this.$util.previewImage({
						current: urls[0],
						urls
					})
				}
				// #endif
				// #ifndef APP-PLUS
				this.$util.previewImage({
					current: urls[0],
					urls
				})
				// #endif  
			},
			// 技-师详情
			async goInfo() {
				let {
					id,
					store = {},
					admin_id = 0,
					merchant_name
				} = this.info
				let {
					from,
					merchant_switch_show,
					plugAuth = {},
				} = this


				let isCheck = false
				// let url = `/user/pages/technician-info?id=${id}`
				let url = `/userA/pages/worker-data?id=${id}`
				if (from != 'collect' && merchant_switch_show && admin_id && merchant_name) {
					url = `/user/pages/merchant-info?id=${admin_id}`
				} else if (from != 'collect' && plugAuth.store && store && store.id) {
					url = `/shopstore/pages/detail?id=${store.id}`
				} else {
					isCheck = true
				}
				if (isCheck) {
					let check = await this.$util.toCheck()
					if (!check) return
				}
				this.$util.goUrl({
					url
				})
			},
			async goTechInfo() {
				let {
					id
				} = this.info
				let check = await this.$util.toCheck()
				if (!check) return
				this.$util.goUrl({
					// url: `/user/pages/technician-info?id=${id}`
					url: `/userA/pages/worker-data?id=${id}`
				})
			},
			toEmit(key) {
				this.$emit(key)
			}
		}
	}
</script>

<style scoped lang="scss">
	.longbingbing-technician-list-item {

		.longbingbing-technician-item {
			padding: 50rpx 30rpx 15rpx 30rpx;

			.top-tag {
				width: 40rpx;
				height: 30rpx;
				color: #B75E1D;
				background: linear-gradient(90deg, #DFB885 0%, #FCE0AD 100%);
				border-radius: 8rpx 0 8rpx 0;
				top: 0;
				left: 0;
			}

			.item-img {
				width: 144rpx;
				height: 144rpx;
				/* #ifdef H5 */
				object-fit: cover;
				/* #endif */
			}

			.king-img {
				width: 80rpx;
				height: 80rpx;
				top: 160rpx;
				left: 0rpx;
				z-index: 1;
			}


			.top-img {
				// width: 220rpx;
				// height: 220rpx;
				// top: -50rpx;
				// left: -36rpx;
				width: 150rpx;
				height: 150rpx;
				top: -4rpx;
				left: -4rpx;
			}

			.hot-img {
				width: 100rpx;
				height: 100rpx;
				top: 70rpx;
				left: 26rpx;
			}

			.new-img {
				width: 38rpx;
				height: 52rpx;
				top: 100rpx;
				left: 110rpx;
			}

			.recommend-img {
				// width: 180rpx;
				// height: 180rpx;
				// top: 30rpx;
				// left: -26rpx;
				width: 54rpx;
				height: 54rpx;
				top: -12rpx;
				left: 0rpx;
			}

			.item-tag {
				width: 100rpx;
				height: 32rpx;
				color: #000;
				background: rgba(216, 216, 216, 0.3);
				margin-top: 19rpx;
				margin-bottom: 6rpx;
			}

			.more-img {
				width: 104rpx;
				height: 33rpx;
				border-radius: 3px;
				transform: rotateZ(360deg);
			}

			.can-service-btn {
				height: 32rpx;
				padding: 0 6rpx;

				.bg {
					opacity: 0.1;
					border-radius: 5rpx;
					top: 0;
					left: 0;
					right: 0;
					bottom: 0;
					z-index: 1;
				}
			}

			.iconyduixingxingshixin {
				font-size: 28rpx;
				background-image: -webkit-linear-gradient(270deg, #FAD961 0%, #F76B1C 100%);
			}

			.star-text {
				color: #FF9519;
				margin-left: 6rpx;
				margin-top: 3rpx;
			}

			.free-fare-btn {
				width: 106rpx;
				height: 32rpx;
				color: #FF3300;
				background: #FFEEEB;
				border-radius: 4rpx;
			}

			.order-num {
				color: #4D4D4D;
			}

			.item-btn {
				width: 130rpx;
				height: 52rpx;
				border-radius: 8rpx;
			}

			.label-item {
				height: 30rpx;
				padding: 0 10rpx;

				.label-item-bg {
					width: 100%;
					height: 30rpx;
					left: 0;
					bottom: 0;
					border-radius: 4rpx;
					background-color: #FF3300;
					opacity: 0.1;
				}
			}

			.label-item-career {
				min-width: 99rpx;
				height: 33rpx;
				line-height: 33rpx;
				border-radius: 16rpx 0px 8rpx 0px;
				left: 0;
				top: 0;
				color: #FF3300;
				padding: 0 10rpx;

				.label-item-bg {
					width: 100%;
					height: 33rpx;
					left: 0;
					bottom: 0;
					border-radius: 16rpx 0px 8rpx 0px;
					background-color: #FF3300;
					opacity: 0.1;
				}
			}
		}

		.list-2-item {
			width: 345rpx;
			height: 519rpx;
			overflow: hidden;

			.item-img {
				width: 100%;
				height: 337rpx;
				/* #ifdef H5 */
				object-fit: cover;
				/* #endif */
				border-radius: 16rpx 16rpx 0 0;
			}

			.item-status {
				top: 21rpx;
				right: -34rpx;
				width: 150rpx;
				height: 38rpx;
				transform: rotate(45deg);

				.text {
					width: 140rpx;
					height: 38rpx;
					transform: scale(0.9);
				}
			}

			.item-time-order {
				left: 0;
				bottom: 0;
				width: 100%;
				height: 34rpx;
				background: rgba(0, 0, 0, 0.64);

				.text {
					transform: scale(0.8);
				}
			}

			.iconyduixingxingshixin {
				font-size: 28rpx;
				color: #FF9300;
			}

			.star-text {
				color: #FF9300;
				margin-left: 6rpx;
				margin-top: 3rpx;
			}

			.item-btn {
				width: 148rpx;
				height: 55rpx;
				border-radius: 10rpx;
				border: 1rpx solid #fff;
			}

			.flex-x-between {
				.iconfont {
					font-size: 26rpx;
					margin-right: 5rpx;
				}
			}

		}

		.list-3-item {
			padding-bottom: 24rpx;
			border-radius: 24rpx;

			.top-tag {
				width: 36rpx;
				height: 26rpx;
				color: #b75e1d;
				background: linear-gradient(90deg, #dfb885 0%, #fce0ad 100%);
				border-radius: 6rpx 0 6rpx 0;
				top: 0;
				left: 0;

				.text {
					transform: scale(0.8);
				}
			}

			.item-img {
				width: 164rpx;
				height: 164rpx;
				object-fit: cover;
			}

			.top-img {
				width: 212rpx;
				height: 212rpx;
				top: -25rpx;
				left: -25rpx;
			}

			.recommend-img {
				width: 200rpx;
				height: 200rpx;
				top: 50rpx;
				left: -10rpx;
			}

			.item-tag {
				min-width: 84rpx;
				height: 40rpx;
				padding: 0 10rpx;
				border-radius: 8rpx;
				margin-left: 16rpx;
			}

			.more-img {
				height: 32rpx;
				border-radius: 8rpx;
			}

			.can-service-btn {
				height: 34rpx;
				padding: 0 6rpx;
				border-radius: 6rpx;

				.bg {
					opacity: 0.1;
					border-radius: 6rpx;
					top: 0;
					left: 0;
					right: 0;
					bottom: 0;
					z-index: 1;
				}

				.text {
					width: 172rpx;
					height: 34rpx;
					top: 0;
					left: -6rpx;
					z-index: 2;
				}
			}

			.iconyduixingxingshixin {
				font-size: 28rpx;
				background-image: -webkit-linear-gradient(270deg,
						#fad961 0%,
						#f76b1c 100%);
			}

			.star-text {
				background-image: -webkit-linear-gradient(270deg,
						#ff6d00 0%,
						#ffa663 100%);
				margin-left: 6rpx;
			}

			.line {
				width: 1rpx;
				height: 28rpx;
				background: #c6cdc8;
				margin: 0 30rpx;
			}

			.free-fare-btn {
				width: 106rpx;
				height: 32rpx;
				color: #FF3300;
				background: #FFEEEB;
				border-radius: 4rpx;
			}

			.order-num {
				color: #7a7d7c;
			}

			.item-btn {
				width: 144rpx;
				height: 56rpx;
				border-radius: 12rpx;
			}

			.label-item-career {
				min-width: 99rpx;
				height: 33rpx;
				line-height: 33rpx;
				border-radius: 16rpx 0px 8rpx 0px;
				left: 0;
				top: 0;
				color: #FF3300;
				padding: 0 10rpx;

				.label-item-bg {
					width: 100%;
					height: 33rpx;
					left: 0;
					bottom: 0;
					border-radius: 16rpx 0px 8rpx 0px;
					background-color: #FF3300;
					opacity: 0.1;
				}
			}

			.label-item {
				padding: 0 10rpx;
				height: 30rpx;

				.label-item-bg {
					width: 100%;
					height: 30rpx;
					left: 0;
					bottom: 0;
					border-radius: 4rpx;
					background-color: #FF3300;
					opacity: 0.1;
				}
			}
		}

		.list-4-item {
			width: 345rpx;
			height: 480rpx;
			overflow: hidden;

			.item-img {
				width: 100%;
				height: 480rpx;
				/* #ifdef H5 */
				object-fit: cover;
				/* #endif */
				border-radius: 16rpx 16rpx 0 0;
			}

			.item-label {
				top: 13rpx;
				left: 10rpx;

				.item-status {
					min-width: 94rpx;
					height: 40rpx;
					border-radius: 40rpx;
					padding: 0 5px;
				}

				.item-status-bg {
					left: 0;
					bottom: 0;
					border-radius: 40rpx;
					height: 40rpx;
					width: 100%;
					opacity: 0.2;
				}
			}

			.item-info {
				width: 345rpx;
				height: 211rpx;
				background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #000000 100%);
				bottom: 0;
				left: 0;

				.item-info-box {
					bottom: 20rpx;
					width: calc(100% - 40rpx);
				}

				.item-info-age {
					width: 67rpx;
					background: #FFEEF8;
					border-radius: 32rpx;
					padding: 8rpx 0 6rpx 0;
				}

				.item-info-label {
					min-width: 71rpx;
					// height: 30rpx;
					border-radius: 30rpx;
					flex-direction: column;
					padding: 6rpx 0 6rpx 0;
					line-height: 1;
					box-sizing: content-box;
					display: inline-block;
					transform: rotate(360deg);
				}

				.item-info-constellation {
					padding: 7rpx 0 6rpx 0;
				}

				.item-info-btn {
					min-width: 94rpx;
					height: 40rpx;
					border-radius: 40rpx;
					transform: rotate(360deg);
				}
			}

		}

		.list-5-item {
			padding: 0 30rpx 25rpx 0;

			.item-img-box {
				padding: 40rpx 0 0 30rpx;

				.item-img {
					width: 164rpx;
					height: 164rpx;
				}

				.diy-4-crown-1 {
					width: 66rpx;
					height: 50rpx;
					left: 8rpx;
					top: 14rpx;
				}

				.diy-4-crown-2 {
					width: 200rpx;
					height: 200rpx;
					left: 10rpx;
					top: 20rpx;
				}

				.diy-4-super {
					width: 93rpx;
					height: 80rpx;
					left: -6px;
					top: 2px;
				}

				.diy-4-new {
					width: 44rpx;
					height: 60rpx;
					left: 22rpx;
					top: 24rpx;
				}

				.diy-4-recommend {
					width: 200rpx;
					height: 200rpx;
					top: 86rpx;
					left: 16rpx;
				}

				.diy-4-medal {
					width: 202rpx;
					height: 48rpx;
					left: 10rpx;
					bottom: -5px;
				}

				.diy-4-crown {
					width: 46rpx;
					height: 40rpx;
					bottom: -1px;
					right: -2px;
				}
			}

			.free-fare-btn {
				width: 106rpx;
				height: 32rpx;
				color: #FF3300;
				background: #FFEEEB;
				border-radius: 4rpx;
			}

			.label-item {
				padding: 0 10rpx;
				min-width: 88rpx;
				height: 30rpx;

				.label-item-bg {
					width: 100%;
					height: 30rpx;
					left: 0;
					bottom: 0;
					border-radius: 4rpx;
					background-color: #FF3300;
					opacity: 0.1;
				}
			}

			.iconyduixingxingshixin {
				font-size: 28rpx;
				background-image: -webkit-linear-gradient(270deg,
						#fad961 0%,
						#f76b1c 100%);
			}

			.star-text {
				background-image: -webkit-linear-gradient(270deg,
						#ff6d00 0%,
						#ffa663 100%);
				margin-left: 6rpx;
			}

			.line {
				width: 1rpx;
				height: 28rpx;
				background: #c6cdc8;
				margin: 0 24rpx;
			}

			.can-service-btn {
				height: 28rpx;
				border-radius: 6rpx;

				.bg {
					opacity: 0.1;
					border-radius: 6rpx;
					top: 0;
					left: 0;
					right: 0;
					bottom: 0;
					z-index: 1;
				}

				.text {
					width: 100rpx;
					height: 28rpx;
					top: 0;
					left: 0;
					z-index: 2;
					border-radius: 4rpx 0 0 4rpx;
					line-height: 30rpx;
				}

				.near-time {
					padding: 0 6rpx;
					line-height: 30rpx;
					height: 28rpx;
				}
			}

			.item-btn {
				height: 52rpx;
			}
		}
	}
</style>